<template>
  <div class="dialog-box">
    <div class="box-content" style="width: 20%">
      <div class="content-header">
        <span>高级选项</span>
        <i class="el-icon-close" @click="clickConfirmBtn"></i>
      </div>
      <div class="content-body">
        <el-form label-width="120px">
          <div class="form-item-box">
            <div style="text-align:center">
              <el-button :class="activeRadio === 0 ? 'active-button' : ''" class="grey-hover-primary-button"
                         style="width:127px;margin-right:12px" @click="activeRadio = 0">转换参数
              </el-button>
              <el-button :class="activeRadio === 1 ? 'active-button' : ''" class="grey-hover-primary-button"
                         style="width:127px"
                         @click="activeRadio = 1">
                合并参数
              </el-button>
              <el-button :class="activeRadio === 2 ? 'active-button' : ''" class="grey-hover-primary-button"
                         style="width:266px;margin-top: 10px" @click="activeRadio = 2">自定义目标坐标系
              </el-button>
            </div>
          </div>
          <div class="form-item-box" style="border:none">
            <!-- 转换参数的高级选项 -->
            <template v-if="activeRadio === 0">
              <el-form-item label="索引反转">
                <el-select v-model="osgConverConfig.options.indicesRoll" :disabled="onlyRead" style="width: 174px">
                  <el-option :value="true" label="是"></el-option>
                  <el-option :value="false" label="否"></el-option>
                </el-select>
                <prompt-icon :content="indicesRollTip"></prompt-icon>
              </el-form-item>
              <el-form-item label="去除法线">
                <el-select v-model="osgConverConfig.options.removeNormal" :disabled="onlyRead" style="width: 174px">
                  <el-option :value="true" label="是"></el-option>
                  <el-option :value="false" label="否"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="几何误差比率">
                <el-input-number v-model="osgConverConfig.geometricErrorRatio" :controls="true" :disabled="onlyRead"
                                 :min="0.1"
                                 :step="0.1" controls-position="right" label="" style="width: 174px">
                </el-input-number>
                <prompt-icon :content="geometricErrorRatioTip"></prompt-icon>
              </el-form-item>
              <el-form-item label="纹理压缩比例">
                <el-input-number v-model="osgConverConfig.textureRatio" :controls="true" :disabled="onlyRead" :min="0.1"
                                 :step="0.1"
                                 controls-position="right" label="" style="width: 174px">
                </el-input-number>
              </el-form-item>
              <el-form-item label="纹理最大值">
                <el-input v-model.number="osgConverConfig.options.textureThreshold" :disabled="onlyRead"
                          style="width: 174px"></el-input>
                <prompt-icon :content="textureThresholdTip"></prompt-icon>
              </el-form-item>
            </template>

            <!-- 合并参数的高级选项 -->
            <template v-if="activeRadio === 1">
              <el-form-item label="高质量">
                <el-select v-model="osgConverConfig.merge.highQuality" :disabled="onlyRead" style="width: 174px">
                  <el-option :value="true" label="是"></el-option>
                  <el-option :value="false" label="否"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="网格合并阈值">
                <el-input v-model.number="osgConverConfig.merge.mergeGridTileThreshold" :disabled="onlyRead"
                          style="width: 174px"></el-input>
                <prompt-icon :content="mergeGridTileThresholdTip"></prompt-icon>
              </el-form-item>
              <el-form-item label="合并纹理最大值">
                <el-input v-model.number="osgConverConfig.merge.textureThreshold" :disabled="onlyRead"
                          style="width: 174px"></el-input>
              </el-form-item>
              <el-form-item label="网格抽析阈值">
                <el-input v-model.number="osgConverConfig.merge.simplifyThreshold" :disabled="onlyRead"
                          style="width: 174px"></el-input>
                <prompt-icon :content="simplifyThresholdTip"></prompt-icon>
              </el-form-item>
            </template>

            <!-- 自定义目标坐标系的高级选项 -->
            <template v-if="activeRadio === 2">
              <prompt-icon :content="coordinateSystemTip"></prompt-icon>
              <div class="custom-form-item-left">
                <el-radio-group v-model="osgConverConfig.options.isEllipsoid" :disabled="onlyRead">
                  <el-form-item>
                    <template slot="label">
                      <el-radio :label="true">正球体</el-radio>
                    </template>
                  </el-form-item>
                  <el-form-item>
                    <template slot="label">
                      <el-radio :label="false">自定义椭球体</el-radio>
                    </template>
                    <div class="custom-form-item-right">
                      <el-form-item label="X半轴长">
                        <el-input v-model="originPointX" :disabled="onlyRead"></el-input>
                      </el-form-item>
                      <el-form-item label="Y半轴长">
                        <el-input v-model="originPointY" :disabled="onlyRead"></el-input>
                      </el-form-item>
                      <el-form-item label="Z半轴长">
                        <el-input v-model="originPointH" :disabled="onlyRead"></el-input>
                      </el-form-item>
                    </div>
                  </el-form-item>
                </el-radio-group>
              </div>
              <el-form-item label="存储ENU坐标系">
                <el-select v-model="osgConverConfig.b3dmCoordinateWithEnu" :disabled="onlyRead" style="width: 174px">
                  <el-option :value="true" label="是"></el-option>
                  <el-option :value="false" label="否"></el-option>
                </el-select>
                <prompt-icon :content="b3dmCoordinateWithEnuTip"></prompt-icon>
              </el-form-item>
            </template>
            <el-form-item label="使用线程">
              <el-input-number v-model="osgConverConfig.threads" :controls="true" :disabled="onlyRead" :max="maxThread"
                               :min="1"
                               :step="1" controls-position="right" style="width: 174px">
              </el-input-number>
              <prompt-icon :content="threadsTip"></prompt-icon>
            </el-form-item>
            <el-form-item class="submit-btn">
              <el-button type="primary" @click="clickConfirmBtn">确定</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import promptIcon from './promptIcon.vue';

export default {
  props: {
    config: {
      type: Object,
      default: () => {
      }
    },
    maxThread: {
      type: Number
    },
    onlyRead: {
      type: Boolean,
      default: false
    }
  },
  components: {
    promptIcon
  },
  data() {
    return {
      indicesRollTip: '有些倾斜摄影模型三角面的索引排列顺序和默认情况不同，会导致转换后的面不可见，此时需要将索引反转，以解决此类问题。',
      textureThresholdTip: '限定纹理的最大尺寸',
      mergeGridTileThresholdTip: '此参数控制最后合并的层级，调小此参数，最后保留的合并层级越多；调大此参数，最后保留的合并层级越少。最小为2；',
      geometricErrorRatioTip: '此参数调大，会更早加载下一级；调小，会延迟加载。对整体3D Tiles起作用。',
      simplifyThresholdTip: '此参数控制顶层抽稀的阈值，调大此参数，可以防止补洞的水面出现破损。',
      coordinateSystemTip: '转换的默认目标球体为WGS84椭球，若要使用正球，请选择自定义目标坐标系-正球体；如需自定义球体轴长，可在选择自定义椭球体，并输入三个轴长',
      b3dmCoordinateWithEnuTip: '存储数据范围的中心点作为ENU坐标系的原点，以便后期在前端调整三维模型数据的位置。',
      threadsTip: '此项为空时默认程序会调用电脑的最大线程数（CPU逻辑处理器数量）。如果想限定仅使用部分线程，可设置此项小于电脑的最大线程。',
      radio: true,
      activeRadio: 0,
      originPointX: '',
      originPointY: '',
      originPointH: ''
    };
  },
  computed: {
    osgConverConfig: {
      get() {
        return this.config
      },
      set(val) {
        this.$emit('update:config', val)
      }
    }
  },
  methods: {
    clickConfirmBtn() {
      this.$emit('confirm')
    }
  },
  created() {
  },
  mounted() {
  }
};
</script>
<style lang="less" scoped>
.custom-form-item-left {
  /deep/ .el-form-item__label {
    text-align: left !important;
  }

  .el-radio {
    color: #fff
  }
}

.custom-form-item-right {
  /deep/ .el-form-item__label {
    text-align: right !important;
  }
}
</style>